:host {
  background: var(--ngm-color-surface);
  @apply block relative w-full h-full overflow-hidden;

  .ngm-story--point-hidden {
    text-decoration: line-through;
  }
}

.ngm-story-point__tab-menu-trigger {
  margin-right: -20px;
}

.ngm-story__filter-bar-anchor {
  position: absolute;
  right: -35px;
  top: 40px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ngm-smart-filter-bar {
  min-height: 100px;
}

.mat-drawer.ngm-story__filter-bar {
  overflow: visible;
  width: 250px;
  &:not(.mat-drawer-opened) {
    visibility: visible !important;
    display: flex;
  }
}

.ngm-story__pagination {
  &[mat-align-tabs="start"] {
    @apply justify-start;
    &[mat-stretch-tabs] {
      .ngm-story__pagination-horizontal {
        @apply justify-start;
      }
    }
  }
  &[mat-align-tabs="center"] {
    @apply justify-center;
    &[mat-stretch-tabs] {
      .ngm-story__pagination-horizontal {
        @apply justify-center;
      }
    }
  }
  &[mat-align-tabs="end"] {
    @apply justify-end;

    &[mat-stretch-tabs=true] {
      .ngm-story__pagination-horizontal {
        @apply justify-end;
      }
    }
  }

  &[mat-stretch-tabs=true] {
    .ngm-story__pagination-horizontal {
      @apply flex-1;
    }
  }
}

.ngm-story__pagination, .ngm-story__pagination-custom, .ngm-story__pagination-fraction {
  @apply absolute flex justify-center text-center z-10 pointer-events-none top-4 left-0 w-full;

  &.ngm-story__pagination-header-below {
    @apply bottom-4 top-auto;
  }
}

.ngm-story__pagination-horizontal {
  @apply flex-row;
}

.ngm-story__global-filter {
  @apply absolute top-0 left-0;
}

.ngm-story__story-container.editable {
  .ngm-story-point {
    @apply border border-solid;
    border-color: var(--ngm-color-outline-variant);
  }
}

:host::ng-deep {
  .ngm-story__point-tab > .mat-mdc-tab-body-content {
    overflow: hidden;
  }
}
